<template>
  <section v-loading="loading">
    <!--工具栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="condition">
        <el-form-item label>
          <el-select
            v-model="condition.AR_number"
            placeholder="区域编号"
            @change="areaChange(congdition.AR_number)"
            clearable
          >
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-select
            v-model="condition.SSL_number"
            placeholder="宿舍楼编号"
            @change="dormChange(condition.SSL_number)"
            clearable
          >
            <el-option
              v-for="item in dorm"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="condition._floor" placeholder="楼层" clearable>
            <el-option
              v-for="item in serial"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition._roomNumber" placeholder="房间编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 操作 -->
    <el-col>
      <el-form :inline="true">
        <el-form-item>
          <el-upload ref="upload" :data="roomInfo">
            <el-button size="small" type="primary">导入房间水电表</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-upload ref="upload" :data="floorInfo">
            <el-button size="small" type="primary">导入楼层水电表</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" @click="outRoom">导出房间水电表</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" @click="outFloor">导出楼层水电表</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="beginning">期初</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="danger" @click="monthEndCost">期末</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- 房间数据展示 -->
    <el-table :data="roomData" style="width: 100%" v-loading="roomLoading">
      <el-table-column align="center" type="selection" fixed width="50"></el-table-column>
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="楼层" prop="floor" min-width="50"></el-table-column>
      <el-table-column align="center" label="房间号" prop="roomNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="历史冷水表" prop="oldCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前冷水表" prop="newCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史热水表" prop="oldHot" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前热水表" prop="newHot" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史电表" prop="oldElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前电表" prop="newElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="roomEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 房间分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="roomChange"
        :current-page="roomPage"
        :total="roomTotalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!-- 楼层数据展示 -->
    <el-table :data="floorData" style="width: 100%" v-loading="floorLoading">
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="楼层" prop="floor" min-width="50"></el-table-column>
      <el-table-column align="center" label="历史冷水表" prop="oldCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前冷水表" prop="newCold" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史电表" prop="oldElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="当前电表" prop="newElectricity" min-width="90"></el-table-column>
      <el-table-column align="center" label="历史空气能用电表" prop="oldAirelectric" min-width="100"></el-table-column>
      <el-table-column align="center" label="当前空气能用电表" prop="newAirelectric" min-width="100"></el-table-column>
      <el-table-column align="center" label="历史空气能用水表" prop="oldAirwater" min-width="100"></el-table-column>
      <el-table-column align="center" label="当前空气能用水表" prop="newAirwater" min-width="100"></el-table-column>
      <el-table-column align="center" label="操作" min-width="130">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="floorEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 楼层分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="floorChange"
        :current-page="floorPage"
        :total="floorTotalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!-- 房间数据编辑 -->
    <el-dialog title="编辑" :visible.sync="alterRoomFormVisible" :close-on-click-modal="false">
      <el-form label-width="6rem" ref="editForm" :model="alterRoom" :rules="rule">
        <el-form-item label="历史冷水表" prop="oldCold">
          <el-input v-model.number="alterRoom.oldCold"></el-input>
        </el-form-item>
        <el-form-item label="当前冷水表" prop="newCold">
          <el-input v-model.number="alterRoom.newCold"></el-input>
        </el-form-item>
        <el-form-item label="历史热水表" prop="oldHot">
          <el-input v-model.number="alterRoom.oldHot"></el-input>
        </el-form-item>
        <el-form-item label="当前热水表" prop="newHot">
          <el-input v-model.number="alterRoom.newHot"></el-input>
        </el-form-item>
        <el-form-item label="历史电表" prop="oldElectricity">
          <el-input v-model.number="alterRoom.oldElectricity"></el-input>
        </el-form-item>
        <el-form-item label="当前电表" prop="newElectricity">
          <el-input v-model.number="alterRoom.newElectricity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="alterRoomFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="editRoomSubmit('editForm')"
          :loading="editRoomLoading"
        >提交</el-button>
      </div>
    </el-dialog>

    <!-- 楼层数据编辑 -->
    <el-dialog title="编辑" :visible.sync="alterFloorFormVisible" :close-on-click-modal="false">
      <el-form label-width="10rem" ref="editForm" :model="alterFloor" :rules="rule">
        <el-form-item label="历史冷水表" prop="oldCold">
          <el-input v-model.number="alterFloor.oldCold"></el-input>
        </el-form-item>
        <el-form-item label="当前冷水表" prop="newCold">
          <el-input v-model.number="alterFloor.newCold"></el-input>
        </el-form-item>
        <el-form-item label="历史电表" prop="oldElectricity">
          <el-input v-model.number="alterFloor.oldElectricity"></el-input>
        </el-form-item>
        <el-form-item label="当前电表" prop="newElectricity">
          <el-input v-model.number="alterFloor.newElectricity"></el-input>
        </el-form-item>
        <el-form-item label="历史空气能用电表" prop="oldAirelectric">
          <el-input v-model.number="alterFloor.oldAirelectric"></el-input>
        </el-form-item>
        <el-form-item label="当前空气能用电表" prop="newAirelectric">
          <el-input v-model.number="alterFloor.newAirelectric"></el-input>
        </el-form-item>
        <el-form-item label="历史空气能用水表" prop="oldAirwater">
          <el-input v-model.number="alterFloor.oldAirwater"></el-input>
        </el-form-item>
        <el-form-item label="当前空气能用水表" prop="newAirwater">
          <el-input v-model.number="alterFloor.newAirwater"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="alterFloorFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="editFloorSubmit('editForm')"
          :loading="editFloorLoading"
        >提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      condition: {
        _area: null,
        _dorm: null,
        _floor: null,
        _roomNumber: null,
        // page: 1,
        roomPage: 1,
        floorPage: 1
      },
      roomData: [],
      floorData: [],
      area: [
        {
          value: "",
          label: ""
        }
      ],
      dorm: [
        {
          value: "",
          label: ""
        }
      ],
      serial: [],
      roomLoading: false,
      floorLoading: false,
      roomPage: 1,
      roomTotalPage: 1,
      floorPage: 1,
      floorTotalPage: 1,
      loading: false,
      roomInfo: {},
      floorInfo: {},
      alterRoomFormVisible: false,
      alterRoom: {},
      editRoomLoading: false,
      alterFloorFormVisible: false,
      alterFloor: {},
      editFloorLoading: false,
      rule: {
        oldCold: [{ required: true, message: "请输入数据", trigger: "blur" }],
        newCold: [{ required: true, message: "请输入数据", trigger: "blur" }],
        oldHot: [{ required: true, message: "请输入数据", trigger: "blur" }],
        newHot: [{ required: true, message: "请输入数据", trigger: "blur" }],
        oldElectricity: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newElectricity: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        oldAirelectric: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newAirelectric: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        oldAirwater: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ],
        newAirwater: [
          { required: true, message: "请输入数据", trigger: "blur" }
        ]
      }
    };
  },
  methods: {},
  mounted() {}
};
</script>